<template>
     <div>

          <!--轮播图区域-->
          <my-swipe :listImg="ListImg" isFull="true"></my-swipe>

          <!--九宫格改造六宫格-->
          <div class="mui-content">
               <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <router-link to="/home/newsList"><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                         <a href="#"><img src="../../images/menu1(1).png" alt="" /></a>
                         <div class="mui-media-body">新闻资讯</div></a></li></router-link>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
                         <a href="#"><img src="../../images/menu2.png" alt="" /><!--<span class="mui-badge">5</span>--></a>
                         <div class="mui-media-body">图片分享</div></router-link></li>
                    <router-link to="/home/commoditylist"><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                         <a href="#"><img src="../../images/menu3.png" alt="" /></a>
                         <div class="mui-media-body">商品购买</div></a></li></router-link>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                         <a href="#"><img src="../../images/menu4.png" alt="" /></a>
                         <div class="mui-media-body">留言反馈</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                         <a href="#"><img src="../../images/menu5.png" alt="" /></a>
                         <div class="mui-media-body">视频专区</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                         <a href="#"><img src="../../images/menu6.png" alt="" /></a>
                         <div class="mui-media-body">联系我们</div></a></li>
               </ul>
          </div>

     </div>
</template>

<script>

     // 导入轮播图模块
     import swipe from "../subcomponents/swipe.vue";

    export default {
         name: "HomeContainer",
         data() {
              return {
                   ListImg: []
              }
         },
         created() {
           this.getAllList();
         },
         methods: {
              handleChange() {
                   
              },
              getAllList() {
                  this.$http({
                      url: 'lunbo.main',
                      method: 'get',
                      emulateJSON: true
                  }).then(function (result) {
                      if (result.status === 200) {
                          this.ListImg = result.body;
                      }
                  })
              }
         },
         components: {
              "mySwipe": swipe
         }
    }
     </script>

     <!--使用 scss 类型需要导入两个 loader -->
     <!--sass-loader 和 node-sass-->
     <style lang="scss" scoped>

          .mui-media-body {
               font-size: 13px !important;
          }

          img[data-v-0131694c] {
               width: 60px;
               height: 60px;
          }

           /*设置六宫格背景颜色*/
           ul[data-v-0131694c].mui-table-view {
                background-color: #fff;
           }

           /*去掉六宫格的边框*/
           li[data-v-0131694c].mui-table-view-cell {
                border-right: 0;
                border-bottom: 0;
           }

          /*去掉六宫格上面的边缝*/
          ul.mui-table-view.mui-grid-view.mui-grid-9 {
               margin-top: 0;
          }

</style>